<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>setInterval Example</title>
</head>

<body>

    <p id="counter">计数器：0</p>
    <button>更新文本颜色</button>
</body>

</html>
<!--  
    1、当按钮被点击时，使用setTimeout函数延迟3秒钟后改变段落文本的颜色为红色。
    2、使用setInterval函数每秒钟更新一次计数器的值，并在段落文本中显示，要求在10秒钟后停止。
-->
<script>
    var counter = 0;
    var counterElement = document.getElementById('counter');
    let button = document.querySelector('button')
    // button.addEventListener('click',function(){}事件监听
    button.onclick = function () {
    setTimeout(()=>{
        counterElement.style.color='red'
    })
    }

    // 设置一个定时器，每1000毫秒（1秒）执行一次  
    var intervalId = setInterval(function () {
        counter++;
        counterElement.textContent = '计数器：' + counter;
        // 假设我们想在计数器达到10时停止它  
        if(counter===10){
            clearInterval(intervalId)
        }

    }, 1000);


</script>